{extend name="base" /}

{block name="title"}
解决方案
{/block}


{block name="content"}
<!--breadcrumb_area-->
<section style="margin-top: 90px;width: 100%">
    <!--    <div class="overlay_bg"></div>-->
    <div style="width: 100% !important;">
        <div class="bread_content">
            <h3 style="color: black;">解决方案</h3>
            <h5 style="color:#c1c1c1;font-weight: normal !important;">SERVICE</h5>
        </div>
        <div class="decoration-top-line"></div>
    </div>
</section>
<!--breadcrumb_area-->
{volist name='service' id='item' key="outerKey"}
<!-- 为每个轮播容器创建唯一ID -->
<section class="contact_area parallax_effect">
    <div class="container">
        <div class="row featurette">
            <!-- 左侧内容保持不变 -->
            <!--            <div class="col-md-10">-->
            <!--                <h2 class="featurette-heading fw-normal lh-1">{$item.title}</h2>-->
            <!--                <h4 class="featurette-heading fw-normal">{$item.subtitle}</h4>-->
            <!--                <div class="decoration-line"></div>-->
            <!--                <p class="lead contact_areap">为会议展览、盛典晚会、音乐演唱会等演出提供LED屏幕系统设计、 设备租赁、项目执行、施工落地、技术支持。</p>-->
            <!--            </div>-->
            <section class="py-5">
                <div class="container">
                    <div class="row">
                        <div class="col-md-10">
                            <div class="audio-system-container">
                                <h2 class="main-title">{$item.title}</h2>
                                <h4 class="subtitle">{$item.subtitle}</h4>
                                <div class="decoration-line"></div>
                                <p class="description">
                                    {$item.desc}
                                </p>
                                <a href="#" class="contact-btn">联系我们 >></a>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 轮播图区域 -->
            <div class="col-md-12">
                <!-- 动态生成唯一ID -->
                <div id="carousel_{$outerKey}" class="carousel slide" data-bs-ride="carousel">
                    <div class="carousel-inner" style=" height:350px; overflow: hidden">
                        {volist name="$item.banner_path" id="image" key="innerKey"}
                        <!-- 调整索引判断逻辑 -->
                        <div class="carousel-item {if $innerKey == 1}active{/if}" data-index="{$innerKey-1}">
                            <img src="{$image}" class="d-block w-100 img-fluid" alt="{$item.title}"
                                 style="object-fit: cover; ">
                        </div>
                        {/volist}
                    </div>
                    <!--如何点击这个时上面的轮播图可以进行其切换-->
                    <div style="text-align: right;margin-top: 10px; color:#f1501a; cursor:pointer;" data-bs-slide-to="carouselFixed">
                        >>
                    </div>

                    <div class="carousel-thumbnails" style="display: none;">
                        <div class="row g-2 justify-content-center">
                            {volist name="$item.banner_path" id="img" key="thumbKey"}
                            <button type="button" data-bs-target="#carousel_{$outerKey}"
                                    data-bs-slide-to="{$thumbKey - 1}" class="{if $thumbKey == 1}active-thumb{/if}"
                                    aria-current="{if $thumbKey == 1}true{else}false{/if}"></button>
                            {/volist}
                        </div>
                    </div>
                </div>
            </div>
        </div>
</section>
<div class="sec_paded"></div>
{/volist}
{/block}
{block name="script"}
<script>

    // 强化版初始化脚本
    document.addEventListener('DOMContentLoaded', function () {

        // 遍历所有轮播容器
        document.querySelectorAll('[id^="carousel_"]').forEach(carouselEl => {
            const carousel = new bootstrap.Carousel(carouselEl, {
                interval: false // 禁用自动播放
            });
            const nextSlideBtn = carouselEl.querySelectorAll('[data-bs-slide-to]');
            // 添加点击事件
            nextSlideBtn.forEach(thumb => {
                thumb.addEventListener('click', function (e) {
                    e.stopPropagation(); // 阻止事件冒泡
                    const targetIndex = parseInt(this.dataset.bsSlideTo);
                    carousel.to(targetIndex);
                });
            });
            // 修改后的同步逻辑
            carouselEl.addEventListener('slid.bs.carousel', function (e) {
                // // 调试输出关键值
                // console.log('当前轮播索引（Bootstrap标准）:', e.to);
                // console.log('当前轮播容器:', this.id);

                // 获取当前轮播所有缩略图（严格限定作用域）
                const currentThumbs = this.parentElement.querySelectorAll('[data-bs-slide-to]');

                currentThumbs.forEach((thumb, index) => {
                    // 直接使用原生索引（无需+1转换）
                    const isActive = index == e.to;
                    // console.log(`缩略图 ${index}:`, isActive);

                    // 同步状态
                    thumb.classList.toggle('active-thumb', isActive);
                    thumb.setAttribute('aria-current', isActive);
                });
            });
        });
    });
</script>
{/block}